<template>
  <div class="goodsinfo-container">

    <!-- 商品轮播区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :lunbotuList="lunbotu" :isfull="false"></swiper>
        </div>
      </div>
    </div>

    <!-- 商品购物区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品的名称标题</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            市场价：<del>￥2399</del>&nbsp;&nbsp;销售价：<span class="now_price">￥2199</span>
          </p>
          <p>购买数量：</p>
          <p>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="primary" size="small">加入购物车</mt-button>
          </p>
        </div>
      </div>
    </div>

    <!-- 商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">页眉</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
        </div>
      </div>
      <div class="mui-card-footer">页脚</div>
    </div>
  </div>
</template>

<script>
// 导入轮播图组件
import swiper from "../subcomponents/swiper.vue";
export default{
    data(){
        return{
            id:this.$route.params.id,//将路由参数对象中的id挂载到data上，方便后期调用
            lunbotu:[]//轮播图的数据
        };
    },
    created(){
        this.getLunbotu();
    },
    methods:{
        getLunbotu(){
            this.$http.get("api/getthumimages/" + this.id).then(result => {
                if(result.body.status === 0){
                  // 先循环轮播图数组的每一项，为item添加img属性，因为轮播图组件中，只认识item.img,不认识item.src
                    
                    result.body.message.forEach(item => {
                      item.img = require('../../uploads/b' + parseInt(Math.random() * 15 + 1) + '.jpg');
                      item.src = item.img;
                    });
                    this.lunbotu = result.body.message;
                }
            })
        }
    },
    components:{
      swiper
    }
}
</script>

<style lang="scss" scoped>
.goodsinfo-container{
    background: #eee;
    overflow: hidden;
}
</style>